<template>
  <div class="page-wrap" v-loading.fullscreen.lock="loading">
    <div class="bd-search">
      <div class="calendar">
        <MiniCalendar></MiniCalendar>
      </div>
      <form action="http://www.baidu.com/s" method="GET">
        <input ref="search" class="kw-input" autocomplete="off" type="text" name="wd" size="38" />
        <input class="kw-button" type="submit" value="百度一下" />
        <input type="hidden" name="ie" value="utf-8" />
        <input type="hidden" name="tn" value="ace" />
      </form>
      <div class="account-list">
        <div
          v-for="item in accountLis"
          class="account"
          :style="item == account ? 'background: #a5d6a7' : ''"
          @click="handleAccountSelected(item)"
          :key="item"
        >
          <i class="el-icon-user" :style="item == account ? 'color: #000' : 'color: #a5d6a7'"></i
          ><span :style="item == account ? 'margin-left: 4px;color: #000' : 'margin-left: 4px;color: #a5d6a7'">{{ item }}</span>
        </div>
      </div>
    </div>
    <div class="todo-list">
      <div class="col" v-for="group in groupList" :key="group.id">
        <div class="title">
          <span>{{ group.label }}</span>
          <div style="flex: 1"></div>
          <draggable :group="groupA">
            <i :key="'ttt' + group.id" class="el-icon-delete-solid icon-btn"></i>
          </draggable>
          <i @click="createNote(group.id)" class="el-icon-circle-plus icon-btn" style="margin-left: 4px"></i>
        </div>
        <div class="item-wrap">
          <draggable
            :move="onMove"
            v-model="dataList[group.id]"
            :group="groupA"
            animation="300"
            dragClass="dragClass"
            ghostClass="ghostClass"
            chosenClass="chosenClass"
            @start="onStart($event, group.id)"
            @end="onEnd"
          >
            <transition-group :style="style">
              <div @dblclick="handleDragItemDblClick(item)" class="drag-item" v-for="item in dataList[group.id]" :key="item.id">
                <div class="drag-item-title">
                  {{ item.title }}
                  <span style="float: right; color: #777; font-weight: normal">{{ item.createdTime.substring(2) }}</span>
                </div>
                <div class="drag-item-line-group">
                  <div
                    @click="copyToChipboard(line.content || line.tip)"
                    v-for="line in item.lines"
                    class="drag-item-line"
                    :style="getStyle(line.content)"
                    :key="line.id"
                  >
                    {{ line.tip || '无标识' }}
                  </div>
                  <div style="width: 25%"></div>
                  <div style="width: 25%"></div>
                  <div style="width: 25%"></div>
                  <div style="width: 25%"></div>
                </div>
              </div>
            </transition-group>
          </draggable>
        </div>
      </div>
    </div>
    <!-- <div class="book-mark-path">
      <el-button class="mini-btn" @click="navBack()" :disabled="parentBMN ? false : true" type="primary" icon="el-icon-arrow-up" circle></el-button>
      <div class="gap"></div>
      <div style="position: relative; flex: 1">
        <div v-if="!pathEnter" class="path-mask" @click="handleMaskClick">
          <template v-for="(path, inx) in inputPath.split('/')">
            <span v-if="inx > 0" :key="inx" style="margin: 0 1px">/</span>
            <span @click="handlePathClick(inx)" class="path-node" :key="path">{{ path }}</span>
          </template>
        </div>
        <el-input @blur="pathEnter = false" v-model="inputPath" placeholder=""></el-input>
      </div>

      <el-button style="margin-left: 4px" class="mini-btn" @click="getBookMark(inputPath)" type="primary" icon="el-icon-right" circle></el-button>
      <el-button style="margin-left: 0px" class="mini-btn" @click="savePath()" type="danger" icon="el-icon-star-off" circle></el-button>
    </div>
    <div class="book-mark">
      <div @click="navNext(bm)" class="bm-item" v-for="bm in currentBMN.filter((e) => !e.url)" :key="'f' + bm.id">
        <div class="bm-item-icon">
          <i class="el-icon-s-finance" style="font-size: 15px; color: #ffc107"></i>
        </div>
        <div class="bm-item-title">
          {{ bm | toUrl }}
        </div>
      </div>
      <div class="bm-item" v-for="bm in currentBMN.filter((e) => e.url)" :key="'u' + bm.id" @click="navTo(bm.url)">
        <div class="bm-item-icon">
          <i class="el-icon-s-promotion" style="font-size: 15px; color: #303f9f"></i>
        </div>
        <div class="bm-item-title">
          {{ bm | toUrl }}
        </div>
      </div>
      <div v-for="x in 10" style="width: 160px" :key="x"></div>
    </div> -->

    <el-dialog
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      center
      width="400px"
      title="选择一个账号"
      :visible.sync="showAccountDialog"
      :show-close="false"
    >
      <div style="display: flex; align-items: center; justify-content: center">
        <div style="width: 200px">
          <el-input v-if="isNew" v-model="newAccount" autocomplete="off"></el-input>
          <el-select v-else v-model="account" placeholder="请选择一个账号">
            <el-option v-for="(item, inx) in options" :key="inx" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </div>
        <div style="width: 10px"></div>
        <el-checkbox v-model="isNew">创建账号</el-checkbox>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button v-if="initialized" type="warning" @click="showAccountDialog = false">取消返回</el-button>
        <el-button type="primary" @click="accountSubmit">确 定 选 择</el-button>
        <div v-if="accountSubmitTip" style="color: red; margin-top: 8px">{{ accountSubmitTip }}</div>
      </div>
    </el-dialog>

    <el-dialog :close-on-press-escape="false" :close-on-click-modal="false" width="460px" :visible.sync="showEditDialog" :show-close="false">
      <div slot="title" style="display: flex; align-items: center">
        <i class="el-icon-edit-outline" style="font-size: 18px; color: #005ca2; margin-right: 6px"></i> {{ editTarget && editTarget.id }}
      </div>
      <template v-if="editTarget">
        <div class="edit-wrap">
          <div class="edit-row">
            <div style="flex: 1">
              <el-input v-model="editTarget.title" autocomplete="off"><template slot="prepend">标题</template></el-input>
            </div>
          </div>
          <template v-for="item in editTarget.lines">
            <div class="edit-row" style="margin-bottom: 1px" :key="'t' + item.id">
              <div style="flex: 1">
                <el-input v-model="item.tip" autocomplete="off"
                  ><template slot="prepend">标签</template> <el-button @click="delLine(item.id)" slot="append" icon="el-icon-delete"></el-button
                ></el-input>
              </div>
            </div>
            <div class="edit-row2" :key="'c' + item.id">
              <div style="flex: 1">
                <el-input placeholder="标签内容" type="textarea" rows="2" v-model="item.content" autocomplete="off"></el-input>
              </div>
            </div>
          </template>
          <i @click="addLine" class="el-icon-circle-plus icon-btn"></i>
        </div>
        <div slot="footer" class="dialog-footer">
          <!-- <el-button type="warning" @click="showEditDialog = false">取消返回</el-button> -->
          <el-button type="primary" @click="onEditSubmit">完成</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import Vue from 'vue'
Vue.filter('toUrl', (bm) => {
  if (bm.title) return bm.title
  if (bm.url)
    return bm.url
      .replace(/https:\/\//g, '')
      .replace(/http:\/\//g, '')
      .replace(/\/.*/g, '')
  return '-'
})
import draggable from 'vuedraggable'
import _ from 'lodash'
const dayjs = require('dayjs')
import NoteCard from '@/components/NoteCard.vue'
import { _fetch } from '@/background/background-utils.js'
function Guid(n = 5) {
  const G = () => {
    return (((Math.random() * 0.8 + 0.1) * 36 ** 5) | 0).toString(36).toLocaleUpperCase()
  }
  if (n == 1) return G()
  return `${G()}-${G()}-${G()}-${G()}-${G()}`
}

function randList(n) {
  const nlis = []
  for (let i = 1; i <= n; i++) {
    nlis[i] = i
  }
  // console.log(nlis)
  const rlis = []
  for (let j = n; j >= 1; j--) {
    const z = Math.random()
    // console.log(z)
    const delIndex = (z * (j - 1) + 1.1) | 0
    // console.log(delIndex)
    rlis[j] = nlis.splice(delIndex, 1)[0]
  }
  return rlis
}

var update = _.debounce(async ({ id, content }) => {
  try {
    await _fetch({ url: 'PushNote', method: 'POST', body: { id, content } })
  } catch (e) {
    return { code: -1, data: e.message }
  }

  /* localstorage 方式保存
  // console.log('do debounce')
  // localStorage.setItem('notes', JSON.stringify(e))
  */
}, 1000)

var colorPool = randList(6)
var colorLis = [null, '#b0bec5', '#b3e5fc', '#80cbc4', '#ffcdd2', '#c5cae9', '#a5d6a7']

import MiniCalendar from '../components/MiniCalendar.vue'
export default {
  name: 'NewTab',
  components: { draggable, MiniCalendar },
  data() {
    return {
      groupList: [
        { id: 'todo', label: '待办' },
        { id: 'processing', label: '处理中' },
        { id: 'note', label: '备忘' },
      ],
      // colors: ['#b0bec5', '#b3e5fc', '#80cbc4', '#ffcdd2', '#c5cae9', '#a5d6a7'],
      loading: true,
      initialized: false,

      /*账号选择 */
      account: '',
      newAccount: '',
      showAccountDialog: false,
      options: [],
      accountLis: [],
      accountSubmitTip: '',
      isNew: false,

      showEditDialog: false,
      editTarget: null,

      currentPath: '',
      inputPath: 'root',
      parentBMN: [],
      currentBMN: [],
      pathEnter: false,

      dragEle: null,
      drag: false,
      groupA: {
        name: 'item',
        pull: true, //可以拖从
        put: true, //可以拖出
      },
      dataList: {},
      style: 'height:calc(100vh - 180px);display: block;overflow: auto;',
    }
  },
  mounted() {
    this.init()
    // update()
  },
  methods: {
    async init() {
      this.loading = true
      const accountLisRes = await _fetch({ url: 'getaccounts' })
      this.accountLis = accountLisRes.data
      this.loading = false
      const accountRes = localStorage.getItem('account')
      if (!accountRes) {
        /* 没有默认账号 */
        this.account = this.accountLis[0]
        localStorage.setItem('account', this.account)
      } else {
        this.account = accountRes
      }
      await this.getNote()
      this.loading = false
      this.showAccountDialog = false
      this.initialized = true

      // let savePath = localStorage.getItem('savePath')
      // if (!savePath) savePath = this.inputPath
      // this.getBookMark(savePath)
    },

    async openDialog() {
      this.loading = true
      const accountLisRes = await _fetch({ url: 'getaccounts' })
      this.options = accountLisRes.data.map((e) => {
        return { value: e, label: e }
      })
      this.loading = false
      this.showAccountDialog = true
    },

    async getBookMark(path = 'root') {
      const res = await _fetch({ url: `PullBookMark` })
      if (!res || !res.data || !res.data.bookmark) return this.$message.info('获取收藏夹失败')
      const root = JSON.parse(res.data.bookmark)
      const chain = path.split('/')
      if (chain[0] != 'root') return this.$message.error('路径应该从root开始！')
      let par = null
      let cur = null
      for (let p of chain) {
        if (p == 'root') {
          cur = root[0].children
          continue
        }
        if (!cur.parent && par) cur.parent = par
        par = cur
        const findFolder = cur.findIndex((e) => e.title == p)
        if (findFolder == -1) return this.$message.error('路径无效！')
        cur = cur[findFolder].children
      }

      this.parentBMN = par
      this.currentBMN = cur
      this.inputPath = path
      this.currentPath = path
      console.log('getBookMark', root)
      // console.log(JSON.parse(res.data))
    },

    savePath() {
      localStorage.setItem('savePath', this.currentPath)
      this.$message.info(this.currentPath + '已保存')
    },

    async getNote() {
      const res = await _fetch({ url: `pullnote?id=${this.account}` })
      this.dataList = JSON.parse(res.data)
      // console.log(this.dataList)
      // console.log(JSON.parse(res.data))
    },

    async accountSubmit() {
      if (this.isNew) {
        if (!this.newAccount) return (this.accountSubmitTip = '请输入账号')
        this.dataList = {
          todo: [],
          processing: [],
          note: [],
        }
        this.account = this.newAccount
        this.newAccount = ''
        localStorage.setItem('account', this.account)
        this.doUpdate()
        this.showAccountDialog = false
        //
      } else {
        if (!this.account) return (this.accountSubmitTip = '请选择一个账号')
        localStorage.setItem('account', this.account)
        await this.getNote()
        this.showAccountDialog = false
      }
    },

    async handleAccountSelected(item) {
      if (item == this.account) return
      try {
        await this.$confirm('确认要切换到账号：' + item, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          customClass: 'msgbox',
        })
        this.account = item
        localStorage.setItem('account', this.account)
        await this.getNote()
      } catch (error) {
        console.log(error)
      }
    },

    onEditSubmit() {
      this.showEditDialog = false
      this.doUpdate()
    },
    doUpdate() {
      // console.log('call doUpdate')
      update({ id: this.account, content: JSON.stringify(this.dataList) })
    },

    //开始拖拽事件
    onStart(e, groupId) {
      this.dragEle = { groupId, item: e.item._underlying_vm_ }
      this.drag = true
    },
    //拖拽结束事件
    onEnd(e) {
      // console.log(this.dataList)
      // console.log(e)
      this.doUpdate()
      this.drag = false
    },
    handleDragItemDblClick(item) {
      this.editTarget = item
      this.showEditDialog = true
      // console.log('handleDragItemDbClick', item)
    },
    addLine() {
      this.editTarget.lines.push({
        id: Guid(),
        content: '',
        rate: 4,
        tip: '',
      })
    },
    async delLine(id) {
      try {
        await this.$confirm('确认要继续删除操作吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          customClass: 'msgbox',
        })
        const inxTobeDel = this.editTarget.lines.findIndex((e) => e.id == id)
        this.editTarget.lines.splice(inxTobeDel, 1)
        this.doUpdate()
      } catch (error) {
        console.log(error)
      }
    },
    async delNote() {
      try {
        await this.$confirm('确认要删除[' + this.dragEle.item.title + ']吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          customClass: 'msgbox',
        })
        const inxTobeDel = this.dataList[this.dragEle.groupId].findIndex((e) => e.id == this.dragEle.item.id)
        this.dataList[this.dragEle.groupId].splice(inxTobeDel, 1)
        this.doUpdate()
      } catch (error) {
        console.log(error)
      }
    },
    onMove(e, originalEvent) {
      //不允许停靠
      if (e.related._prevClass == 'el-icon-delete-solid icon-btn') {
        // console.log(this.dragEle)
        this.delNote()
        return false
      }
      return true
    },
    mouseOver(e) {
      // console.log(e)
    },
    async copyToChipboard(item) {
      await navigator.clipboard.writeText(item)
      this.$message.info('已经复制到剪切板！')
    },
    navTo(url) {
      window.open(url, '_blank')
    },

    navBack() {
      this.currentBMN = this.parentBMN
      if (this.parentBMN.parent) {
        this.parentBMN = this.parentBMN.parent
      } else {
        this.parentBMN = null
      }
      this.inputPath = this.currentPath.replace(/\/[^\/]*$/g, '')
      this.currentPath = this.inputPath
    },

    navNext(bm) {
      if (!this.currentBMN.parent && this.parentBMN) this.currentBMN.parent = this.parentBMN
      this.parentBMN = this.currentBMN
      this.currentBMN = bm.children
      this.inputPath = this.currentPath + '/' + bm.title
      this.currentPath = this.inputPath
      // console.log(bm)
    },
    getStyle(content) {
      if (content.match(/^#([0-9a-f]{6})$/)) {
        return `background:${content}`
      } else {
        if (colorPool.length == 1) colorPool = randList(6)
        const t = colorPool.pop()
        return `background:${colorLis[t]}`
      }
    },
    handlePathClick(inx) {
      const selectPath = this.inputPath
        .split('/')
        .slice(0, inx + 1)
        .join('/')
      if (selectPath == this.inputPath) {
        event.stopPropagation()
        return
      }

      this.inputPath = selectPath
      this.currentPath = this.inputPath
      this.getBookMark(selectPath)
      event.stopPropagation()
    },

    handleMaskClick() {
      this.pathEnter = true
      // console.log('11111111')
    },

    createNote(groupid) {
      const newNote = {
        id: Guid(),
        isFocus: false,
        position: {
          left: 40,
          top: 382,
        },
        lines: [
          {
            id: Guid(),
            content: '',
            rate: 4,
            tip: '',
          },
        ],
        title: '未命名',
        createdTime: dayjs().format('YYYY-MM-DD'),
        lock: false,
      }
      this.dataList[groupid].push(newNote)
      this.editTarget = newNote
      this.showEditDialog = true
    },
  },
}
</script>

<style lang="scss" scoped>
.bd-search {
  padding: 18px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 10px;
  // background: #bbb;
  // border-bottom: 1px solid #ddd;
  border-radius: 6px;
  position: relative;
  // box-shadow: 0 -1px 12px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 12px 0 rgba(255, 255, 255, 0.2);
}

.calendar {
  position: absolute;
  top: 8px;
  left: 50px;
}

form {
  width: 600px;
  height: 50px;
  display: flex;
  align-items: center;
}
.logo {
  width: 56px;
}
.menu {
  margin-top: 6px;
  font-size: 20px;
  width: 100%;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.menu h3 {
  padding: 0;
  margin: 0;
  color: #444;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.kw-input {
  box-sizing: border-box;
  width: 512px;
  height: 40px;
  padding: 0 16px;
  font-size: 16px;
  margin: 0;
  vertical-align: top;
  outline: 0;
  box-shadow: none;
  border-radius: 10px 0 0 10px;
  border: 1px solid rgb(0, 92, 162);
  background: #fff;
  color: #222;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

.kw-button {
  box-sizing: border-box;
  cursor: pointer;
  width: 138px;
  height: 40px;
  line-height: 40px;
  padding: 0;
  background: rgb(0, 92, 162);
  border-radius: 0 10px 10px 0;
  font-size: 16px;
  color: #fff;
  box-shadow: none;
  font-weight: 400;
  border: 1px solid rgb(0, 92, 162);
  outline: 0;
}

.page-wrap {
  box-sizing: border-box;
  width: 960px;
  height: 100vh;
  // border-right: 1px solid #ddd;
  // border-left: 1px solid #ddd;

  // background: #bbb;
}

/*  drag*/

/*定义要拖拽元素的样式*/
.ghostClass {
  background-color: bclue !important;
}
.chosenClass {
  background-color: #ddd !important;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  color: #fff;
  opacity: 1 !important;
}
.dragClass {
  // background-color: #005ca2 !important;
  opacity: 1 !important;
  box-shadow: none !important;
  outline: none !important;
  background-image: none !important;
  color: #fff;
}
.todo-list {
  width: 100%;
  display: flex;
  box-sizing: border-box;
  padding: 10px 0;
  height: calc(100vh - 105px);
}
.title {
  font-size: 14px;
  font-weight: bold;
  display: flex;
  padding: 6px 12px;
  margin-bottom: 2px;
  color: #555;
  height: 20px;
  background: #eee;
  border-top-right-radius: 6px;
  border-top-left-radius: 6px;
}
.icon-btn {
  color: #aaa;
  font-size: 19px;
  // background: #ddd;
}

.icon-btn:hover {
  color: #005ca2;
}

.col {
  box-sizing: border-box;
  height: 100%;
  flex: 1;
  // border: solid 1px #ddd;
  border-radius: 6px;
  box-shadow: 0 2px 12px 0 rgba(255, 255, 255, 0.2);
}
.col + .col {
  margin-left: 10px;
}

.item-wrap {
  padding: 10px;
  overflow: auto;
  height: calc(100% - 38px);
}
.drag-item {
  padding: 6px 12px;
  margin: 0px 10px 0px 10px;
  border: solid 1px #eee;
  background-color: #f1f1f1;
  border-radius: 4px;
}
.drag-item-title {
  letter-spacing: 1px;
  font-weight: bold;
  color: #444;
}
.drag-item-line-group {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  // gap: 4px;
}
.drag-item-line {
  color: #666;
  background: #409eff;
  padding: 2px 4px;
  border-radius: 4px;
  margin-bottom: 4px;
  flex-grow: 1;
  margin-right: 4px;
  text-align: center;
}

.drag-item-line:nth-child(6n + 1) {
  background: #a5d6a7;
}
.drag-item-line:nth-child(6n + 2) {
  background: #b3e5fc;
}
.drag-item-line:nth-child(6n + 3) {
  background: #80cbc4;
}
.drag-item-line:nth-child(6n + 4) {
  background: #ffcdd2;
}
.drag-item-line:nth-child(6n + 5) {
  background: #c5cae9;
}
.drag-item-line:nth-child(6n) {
  background: #a5d6a7;
}

.drag-item-line:hover {
  cursor: pointer;
}

// .drag-item-line + .drag-item-line {
//   margin-left: 4px;
// }

.drag-item:hover {
  background-color: #fdfdfd;
  // cursor: move;
}
.drag-item + .drag-item {
  border-top: none;
  margin-top: 6px;
}

.book-mark {
  // border-top: 1px solid #ddd;
  height: calc(100vh - 750px);
  overflow: auto;
}

/deep/.el-dialog--center {
  border-radius: 10px;
}

/deep/ .el-dialog__body {
  padding: 4px 20px;
}
/deep/.el-dialog {
  border-radius: 10px;
}
.account-list {
  position: absolute;
  bottom: 8px;
  right: 8px;
}
.account {
  display: flex;
  align-items: center;
  padding: 2px 12px;
  // background: #a5d6a7;
  border: 1px #a5d6a7 solid;
  font-size: 12px;
  line-height: 16px;
  border-radius: 4px;
}

.account + .account {
  margin-top: 6px;
}

.account:hover {
  cursor: pointer;
}
.edit-wrap {
  // background: #bbb;
  // height: 300px;
  display: flex;
  flex-direction: column;
  .edit-row2 {
    display: flex;
    flex-direction: column;
    margin-bottom: 8px;
    .edit-label {
      margin-bottom: 8px;
      margin-right: 8px;
      font-size: 13px;
    }
  }

  .edit-row {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    .edit-label {
      margin-right: 8px;
      font-size: 13px;
    }
  }
}
.gap {
  width: 4px;
}
.path-mask {
  z-index: 2;
  position: absolute;
  left: 0;
  top: 0;
  background: #fff;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  display: flex;
  align-items: center;
  margin: 1px;
  box-sizing: border-box;
  padding: 0 15px;
}
.path-node {
  padding: 2px 6px;
  border-radius: 2px;
}
.path-node:hover {
  background: #eee;
  cursor: pointer;
}
.mini-btn {
  transform: scale(0.8);
}
.book-mark-path {
  border-top: 1px #eee solid;
  border-bottom: 1px #eee solid;
  padding: 0 4px;
  height: 40px;
  // background: #bbb;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  display: flex;
  align-items: center;
  box-shadow: 0 0px 12px 0 rgba(0, 0, 0, 0.1);
}
.book-mark {
  display: flex;
  flex-wrap: wrap;
  align-content: start;
  padding: 4px;
  overflow: auto;
  height: calc(100vh - 752px);
  box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.1);
}
.bm-item {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  padding: 7px 10px;
  display: flex;
  align-items: center;
  margin: 2px;
  width: 90px;
  // background: #80cbc4;
  // border: 1px solid #80cbc4;
  border-radius: 4px;
  // flex-grow: 1;
  height: 16px;
}
.bm-item:hover {
  background: #eee;
}
.bm-item-title {
  margin-left: 4px;
  color: #555;
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 当文本超出时显示省略号 */
}
</style>
